List columns show/hide
Description
A control that can be used to change the columns shown in a List control.
Discussion
You can control the visibility of columns in a List control.
For example, in the image below, a column selector is shown. You can toggle the visibility of any column by clicking on the column name in the menu that is shown when the column selector button is clicked.
To add a List Column Selector button to an application, select the List columns show/hide item from the Defined Controls section of the UX Builder toolbox.
Setting Initial Show/Hide State of Columns
The List columns show/hide control lists the columns in the List's layout. If you want to include columns in the list of choices but don't want to display the columns when the List control is first rendered, check the column's Initial state is hidden property. This will hide the column when the List control is first rendered but include the column in the List columns show/hide control's choices.
Columns that are not in the List's layout will not be listed in the List columns show/hide control choices.
Reordering Columns
In addition to specifying the columns to show, you can also use the List column show/hide control to reorder columns in the List control. Click- or tap-hold the hamburger icon next to the column you would like to move and drag it to the new location. This will reorder the List's columns.
onListColumnSelectorChanged Event
When the user makes a selection the show/hide menu, the client-side onListColumnSelectorChanged event in the List control is triggered. This event could be used to persist the state of the List control or perform other events in the component.
Videos
Setting the order and visibility of columns in a List Layout
You can allows users to dynamically show/hide List columns at run-time and also to change the order in which the columns appear in the List by adding a List column show/hide button to a UX component.
In this video we show how a List column show/hide button can be added to a UX and we show how it can be used to change the columns in the List are run-time.
In the video, we also show how an event is fired when the List layout is changed. This event is defined in the List builder onListColumnSelectorChanged event.
Saving and Restoring the List's Column Layout
The Show/hide list columns Defined Control can be used to give the user the ability to show, hide, and reorder columns in a List's layout. The layout can be saved, allowing you to later restore the layout the user created when they return to the application.
When the user changes the layout of the List columns, the onListColumnSelectorChanged event is triggered. This event can be used to persist the List's modified layout.
In this video, we show how to use the UX component's .persistListColumnLayout() and .restoreListColumnLayout() methods to save and restore the Column layout for a List control.
See Also